<template>
    <div style="margin-top: -10px">
        <navbar class="navbarBox" select="1" />
        <img alt src="@/assets/about/bj2.png" style="height:300px;width:100%" />
        <div class="width-60b textarea pb-50">
            <div class="pd-10 width-100b bg-black color-fff text-center font-28 weight-bold">推荐网络表演</div>
            <div class="width-98b flex align-center jus-around" style="margin-left: 1%;flex-wrap: wrap;">
                <div :key="index" class="position-relative" style="width:48%;margin-top:18px" v-for="(item,index) in creation">
                    <img :src="item.thumbnail" style="width: 100%;height:400px" />

                      <img src="@/assets/play.png" alt="" srcset="" class="playimg"  @click="play(item.id,item.media,item)">
                    <div class="position-absolute pop-info">
                        <div class="flex align-center jus-between mt-20 color-333 font-16 weight-bold pl-20 pr-40">
                            <div>
                                {{ item.name }}
                                <span class="ml-8">网络表演中</span>
                                <el-button @click="play(item.id,item.media,item)" class="ml-10" size="mini" type="warning">进入网络表演间</el-button>
                            </div>
                            <div class="color-orange flex align-center" v-if="item.need_pay">
                                <img src="@/assets/coin.png" style="width: 20px;" />
                                <div class="mt-2 ml-5">{{ item.need_pay }}</div>
                            </div>
                        </div>
                        <div class="mt-20 pl-20 font-14 weight-bold" style="color:#fd2b2b">{{ item.action }}</div>
                    </div>
                </div>
            </div>
        </div>
        <bottom class="bottomBox"></bottom>
        <!-- 播放弹窗 -->
        <div class="playPopup" v-if="playShow">
            <playlive :isLive="true" :worksId.sync="worksId" ref="childRef"></playlive>
        </div>

        <!-- 关闭按钮 -->
        <div @click="closeBtnFun" class="closeBtn hand" v-show="playShow">
            <i class="el-icon-circle-close closeIcon"></i>
        </div>
        <el-dialog :before-close="handleClose" :visible.sync="dialogVisible" title="观看该网络表演需要付费" width="30%">
            <span>{{ title }}</span>
            <span class="dialog-footer" slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button @click="topay" type="primary">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import playlive from '@/components/playlive/playlive.vue'
export default {
    components: {
        playlive,
    },
    data() {
        return {
            playShow: false,
            worksId: null,
            dialogVisible: false,
            title: '',
            creation: [
                {
                    id: 1,
                    thumbnail: 'https://qiniu.hnmzkj.top/stream/live/%E5%B0%8F%E4%BB%99%E5%A5%B3%E5%94%B1%E6%AD%8C.png',
                    media: 'https://qiniu.hnmzkj.top/stream/live/%E5%B0%8F%E4%BB%99%E5%A5%B3%E5%94%B1%E6%AD%8C.mp4',
                    name: '听说者',
                    city: '贵阳市',
                    action: '#唱歌聊天',
                    heat: '13486542',
                    time: '18457451',
                    people: 965,
                    fans: 80,
                    number: '202454525',
                    level: 14,
                    need_pay: 0,
                },
                {
                    id: 2,
                    thumbnail: 'https://qiniu.hnmzkj.top/stream/live/%E5%8F%A4%E7%AD%9D%E5%BC%B9%E5%A5%8F.png',
                    media: 'https://qiniu.hnmzkj.top/stream/live/%E5%8F%A4%E7%AD%9D%E5%BC%B9%E5%A5%8F.mp4',
                    name: 'hildishness(稚气)',
                    city: '贵阳市',
                    action: '#乐器演奏',
                    heat: '13486543',
                    time: '18456451',
                    people: 4501,
                    number: '33356523',
                    level: 5,
                    fans: 160,
                    need_pay: 10,
                },
                {
                    id: 4,
                    thumbnail: 'https://qiniu.hnmzkj.top/stream/live/%E5%B0%8F%E5%A7%90%E5%A7%90%E5%90%B9%E5%94%A2%E5%91%90.png',
                    media: 'https://qiniu.hnmzkj.top/stream/live/%E5%B0%8F%E5%A7%90%E5%A7%90%E5%90%B9%E5%94%A2%E5%91%90.mp4',
                    name: 'Deepsea（深海）',
                    city: '贵阳市',
                    heat: '13486545',
                    action: '#乐器演奏',
                    time: '18454451',
                    people: 420,
                    number: '475752',
                    level: 13,
                    fans: 75,
                    need_pay: 0,
                },
                {
                    id: 5,
                    thumbnail: 'https://qiniu.hnmzkj.top/stream/live/%E5%BC%A0%E4%B8%BD%E7%9A%84%E5%B0%8F%E6%8F%90%E7%90%B4.png',
                    media: 'https://qiniu.hnmzkj.top/stream/live/%E5%BC%A0%E4%B8%BD%E7%9A%84%E5%B0%8F%E6%8F%90%E7%90%B4.mp4',
                    name: '浊酒',
                    city: '贵阳市',
                    heat: '13486546',
                    time: '18453451',
                    action: '#乐器演奏',
                    people: 4547,
                    number: '3265154',
                    level: 7,
                    fans: 66,
                    need_pay: 0,
                },
                {
                    id: 6,
                    thumbnail: 'https://qiniu.hnmzkj.top/stream/live/%E7%8B%AC%E5%94%B1%E5%81%8F%E7%88%B1.png',
                    media: 'https://qiniu.hnmzkj.top/stream/live/%E7%8B%AC%E5%94%B1%E5%81%8F%E7%88%B1.mp4',
                    name: 'Lolita（萝莉）',
                    city: '贵阳市',
                    level: 10,
                    heat: '13486547',
                    time: '18452451',
                    action: '#唱歌聊天',
                    people: 6334,
                    number: '17512115',
                    fans: 108,
                    need_pay: 10,
                },
                {
                    id: 13,
                    thumbnail: 'https://qiniu.hnmzkj.top/stream/live/%E7%94%B5%E5%AD%90%E7%90%B4%E6%BC%94%E5%A5%8F.png',
                    media: 'https://qiniu.hnmzkj.top/stream/live/%E7%94%B5%E5%AD%90%E7%90%B4%E6%BC%94%E5%A5%8F.mp4',
                    name: '猫性小仙女',
                    city: '贵阳市',
                    heat: '13486555',
                    time: '18452451',
                    action: '#乐器演奏',
                    people: 258,
                    number: '175121555',
                    level: 8,
                    fans: 32,
                    need_pay: 0,
                },
                {
                    id: 13,
                    thumbnail: 'https://qiniu.hnmzkj.top/stream/live/%E7%9B%BC%E7%9B%BC%E5%9C%A8%E5%AE%B6%E5%94%B1%E6%AD%8C.png',
                    media: 'https://qiniu.hnmzkj.top/stream/live/%E7%9B%BC%E7%9B%BC%E5%9C%A8%E5%AE%B6%E5%94%B1%E6%AD%8C.mp4',
                    name: '云朵有点甜',
                    city: '贵阳市',
                    heat: '13486555',
                    time: '18452451',
                    action: '#唱歌聊天',
                    people: 258,
                    number: '175121555',
                    level: 8,
                    fans: 32,
                    need_pay: 0,
                },
                {
                    id: 14,
                    thumbnail: 'https://qiniu.hnmzkj.top/stream/live/%E8%80%81%E4%BA%8C%E5%94%B1%E6%AD%8C.png',
                    media: 'https://qiniu.hnmzkj.top/stream/live/%E8%80%81%E4%BA%8C%E5%94%B1%E6%AD%8C.mp4',
                    name: '甜甜的梦都给你',
                    city: '贵阳市',
                    heat: '13486555',
                    time: '18452451',
                    action: '#唱歌聊天',
                    people: 258,
                    number: '175121555',
                    level: 8,
                    fans: 32,
                    need_pay: 0,
                },
            ],
        }
    },
    methods: {
        closeBtnFun() {
            this.$nextTick(() => {
                this.$refs.childRef.empty() // 调用子组件的方法
                this.playShow = false
            })
        },
        play(id, media, item) {
            if (item.need_pay > 0) {
                this.title = '该网络表演需要付费' + item.need_pay + '金币，确认支付吗？'
                this.dialogVisible = true
                return false
            }
            //  打开弹窗
            this.worksId = id
            this.playShow = true
            this.$nextTick(() => {
                this.$refs.childRef.childMethod(media, item) // 调用子组件的方法
            })
        },
        handleClose() {
            this.dialogVisible = false
        },
        topay() {
            this.dialogVisible = false
            this.$message.error('请先实名认证')
        },
    },
}
</script>

<style lang="scss" scoped>
.textarea {
    margin-left: 20%;
}
.pop-info {
    bottom: 4px;
    width: 100%;
    height: 100px;
    background: rgba(255, 255, 255, 0.8);
}
.playPopup {
    width: 100vw;
    height: 100vh;
    background-color: rgba($color: #000000, $alpha: 1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    min-width: 1800px;
}

.closeBtn {
    position: fixed;
    top: 140px;
    left: 70px;
    width: 50px;
    height: 50px;
    z-index: 10000;
}

.closeIcon {
    font-size: 50px;
    color: rgb(85, 85, 85);
}

.closeIcon:hover {
    color: #c5c5c5;
}

.playimg{
    width:100px;
    position: relative;
     top: -250px;left: 40%;
     opacity: 0.7;
     cursor: pointer;
}
</style>